<!-- 排行榜 -->
<template>
	<view class="body">
		<view class="item" v-for="(item,index) in AllList" :key="item.id" @click="toSongSheetInfo(item.id)">
			<view class="top">
				<image :src="item.coverImgUrl"></image>
			</view>
			<view class="title">
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapActions,mapState} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		methods: {
			...mapActions('Home', ['GetAllList']),
			// 跳转到歌单详情页
			toSongSheetInfo(id) {
				uni.navigateTo({
					url: `/pages/SongSheetInfo/index?id=${id}`
				})
			},
		},
		computed:{
			...mapState('Home',['AllList'])
		},
		onLoad() {
			this.GetAllList()
		}
	}
</script>

<style lang="scss">
	.body {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.item {
			width: 30%;
			margin-right: 20rpx;
			margin-bottom: 30rpx;

			.top {
				margin-bottom: 20rpx;

				image {
					width: 100%;
					height: 200rpx;
					border-radius: 30rpx;
				}
			}

			.title {
				display: flex;
				justify-content: center;

				text {
					opacity: 0.8;
					font-size: 25rpx;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
			}
		}
	}
</style>
